<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<!--<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />-->
<title>涛宝商城-注册系统</title>
<link rel="stylesheet" type="text/css" th:href="@{appstyle/css/mdui.css}" />
<script type="text/javascript" th:src="@{appstyle//js/jquery-3.3.1.js}"></script>
<script type="text/javascript" th:src="@{appstyle/js/mdui.js}"></script>
</head>
<style>
* {
	margin: 0;
	padding: 0;
}

body {
	min-width: 1080px;
}

#denglu {
	margin: 0px auto;
	width: 400px;
	height: 580px;
	background-color: white;
	margin-top: 40px;
}

h1 {
	text-align: center;
	border-bottom: 1px solid #ddd;
	padding: 10px;
	font-size: 18px;
	font-weight: 700;
	color: #666;
	margin-bottom: 20px;
}

.input {
	padding: 10px 0 10px 0px;
	margin: 5px;
	margin-bottom: 13px;
	width: 308px;
	height: 18px;
	line-height: 18px;
	font-size: 15px;
	color: #333;
	outline: none;
	text-align: center;
}

.button {
	margin: 5px;
	width: 312px;
	padding: 6px 0;
	background-color: #66CCFF;
	color: white;
	font-size: 20px;
	cursor: pointer;
	border: 0;
}

#zuc {
	width: 325px;
	margin: 0 auto;
}

#logo {
	margin: 0 auto;
	width: 1080px;
	height: 60px;
}

.logo_1 {
	font-size: 25px;
	font-weight: bold;
	color: #66CCFF;
	position: relative;
	top: 10px;
	text-decoration: none;
}

#foot {
	height: 661px;
	margin: 0 auto;
	border: 1px solid #66CCFF;
	background-color: #66CCFF;
}

.zuce1 {
	padding: 0 5px;
	color: #666;
	text-decoration: none;
	font-size: 12px;
}

#zuce {
	margin: 8px auto 0;
	text-align: right;
	color: #666;
}

.zuce1:hover {
	color: #66CCFF;
}

#tail {
	width: 1080px;
	height: 60px;
	margin: 0 auto;
}

.p2 {
	text-align: center;
	margin-top: 15px;
	color: #666;
	font-size: 12px;
	cursor: pointer;
}
</style>

<body>
	<form>
		<div id="logo">
			<a class="logo_1" href="index.html">涛宝商城</a>
		</div>
		<div id="foot">
			<div id="denglu">
				<h1>用户注册</h1>
				<div id="zuc">
						<input class="input" type="text" id="username" placeholder="输入用户名" /> <br /> <input
							class="input" type="password" id="password" placeholder="输入密码" /> <br /> <input
							class="input" type="text" id="password2" placeholder="再次输入密码" /> <br /> <input
							class="input" type="text" id="phone" placeholder="输入电话" /> <br /> <input
							class="input" type="text" id="email" placeholder="输入邮箱" /> <br /> <input
							class="input" type="text" id="question" placeholder="输入密码提示问题" /> <br /> <input
							class="input" type="text" id="answer" placeholder="输入密码提示答案" /> <br /> <input
							class="button" type="button" id="registerBtn" value="立即注册" />
					<div id="zuce">
						<a href="Land.html" class="zuce1">已有帐号，去登录>></a>
					</div>
				</div>
				<script type="text/javascript">
				    $(document).ready(function(){
				    	$("#registerBtn").click(function(){
				    		if($("#username").val().trim()==""){
				    			mdui.snackbar({
								    message: '用户名没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#password").val().trim()==""){
				    			mdui.snackbar({
								    message: '密码没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#password2").val().trim()==""){
				    			mdui.snackbar({
								    message: '二次密码没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#password2").val().trim()!=$("#password").val().trim()){
				    			mdui.snackbar({
								    message: '两次密码不一致',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#phone").val().trim()==""){
				    			mdui.snackbar({
								    message: '手机号没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#email").val().trim()==""){
				    			mdui.snackbar({
								    message: '邮箱没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#question").val().trim()==""){
				    			mdui.snackbar({
								    message: '密保问题没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else if($("#answer").val().trim()==""){
				    			mdui.snackbar({
								    message: '密保问题的答案没有输入!',
								    position: 'top',
								    timeout:1000
							   });
				    		}else{
				    			// 校验完毕 发送请求进行注册
				    			$.ajax({
				    				url:"user/register.do",
				    				Type:"post",
				    				data:user={
				    					username:$("#username").val(),
				    					password:$("#password").val(),
				    					phone:$("#phone").val(),
				    					email:$("#email").val(),
				    					question:$("#question").val(),
				    					answer:$("#answer").val(),
				    				},
				    				dataType:"json",
				    				success:function(data){
				    					mdui.snackbar({
										    message: data.msg,
										    position: 'top',
										    timeout:1000,
										    onClosed : function() {
						    					if(data.status==0){
						    					    location.href="index.html";
						    					}  	
										    }
									   });
				    				}
				    			})
				    		}
				    	})
				    })
				</script>
			</div>
		</div>
		<div id="tail">
			<p class="p2">涛宝商城</p>
			<p class="p2">Copyright © 2019 taobaostore.top All Rights
				Reserved</p>
		</div>

	</form>
</body>

</html>
<script>
</script>